<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>运营管理</el-breadcrumb-item>
                <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-row :gutter="10">
            <el-col :span="16">
                <div class="box-shadow">
                    <div class="tip-title">
                        <p>库存分析</p>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="12">
                                <div id="product_chart_1" ref="product_chart_1"
                                     style="width: 100%;height: 220px;overflow: hidden;"></div>
                            </el-col>
                            <el-col :span="12">
                                <div id="product_chart_2" ref="product_chart_2"
                                     style="width: 100%;height: 220px;overflow: hidden;"></div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box-shadow">
                    <div class="tip-title">
                        <p>销量分析</p>
                    </div>
                    <div>
                        <div id="product_chart_3" ref="product_chart_3"
                             style="width: 100%;height: 220px;overflow: hidden;"></div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <div style="margin-bottom: 15px;">
            <el-row>
                <el-col :span="2">
                    <div>
                        <el-button type="success" size="small" icon="el-icon-circle-plus-outline"
                                   @click="dialogFormVisible=true">添加产品
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="7" :offset="15">
                    <div>

                    </div>
                </el-col>
                <el-col :span="12">
                    <div></div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%;">
                <el-table-column
                        align="center"
                        prop="product"
                        label="产品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="manufacturer"
                        label="制造商"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="inventory"
                        width="150"
                        label="库存">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        prop="money"
                        label="价格">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                type="primary"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                icon="el-icon-delete"
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 15px;float: right;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50,100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background>
            </el-pagination>
            <div style="clear:both;"></div>
        </div>
        <el-dialog title="添加产品" :visible.sync="dialogFormVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="form">
                <el-form-item label="产品名称" label-width="80px">
                    <el-input v-model="form.product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="提供商" label-width="80px">
                    <el-input v-model="form.manufacturer" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" label-width="80px">
                    <el-input type="number" v-model="form.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" label-width="80px">
                    <el-input type="number" v-model="form.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="form.state" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addProduct">确 定</el-button>
                <el-button @click="dialogFormVisible = false;">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑" :visible.sync="dialogEditVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="updateDate">
                <el-form-item label="产品名称" label-width="80px">
                    <el-input v-model="updateDate.product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="提供商" label-width="80px">
                    <el-input v-model="updateDate.manufacturer" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" label-width="80px">
                    <el-input type="number" v-model="updateDate.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" label-width="80px">
                    <el-input type="number" v-model="updateDate.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="updateDate.state" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateProduct">确 定</el-button>
                <el-button @click="dialogEditVisible = false;">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import {
        deleteProduct,
        getProductById,
        productQueryAll,
        updateProduct,
        addProduct,
        productHadoop, getMarketView
    } from "@/api/admin/operate";

    export default {
        name: "Product",
        mounted() {
            this.chart_3();
            this.productQueryAll();
            getMarketView().then(resp => {
                this.chart_1(resp);
                this.chart_2(resp);
            })
        },
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                dialogEditVisible: false,
                form: {
                    product: "",
                    manufacturer: "",
                    inventory: "",
                    money: "",
                    state: "",
                },
                updateDate: {
                    id: "",
                    product: "",
                    manufacturer: "",
                    inventory: "",
                    money: "",
                    state: "",
                }
            }
        },
        methods: {
            productQueryAll() {
                productQueryAll(this.currentPage, this.pageSize).then(resp => {
                    this.tableData = resp.data.records;
                    this.total = resp.data.total;
                    this.currentPage = resp.data.current;
                    this.pageSize = resp.data.size;
                })
            },
            updateProduct() {
                updateProduct(this.updateDate.id,
                    this.updateDate.product,
                    this.updateDate.manufacturer,
                    this.updateDate.inventory,
                    this.updateDate.money,
                    this.updateDate.state).then(resp => {
                    if (resp.code == 0) {
                        this.$message.success("更新成功！");
                        this.productQueryAll();
                        getMarketView().then(resp => {
                            this.chart_1(resp);
                            this.chart_2(resp);
                        })
                        this.dialogEditVisible = false;
                    } else {
                        this.$message.error("更新失败！");
                    }
                })
            },
            addProduct() {
                addProduct(this.form.product,
                    this.form.manufacturer,
                    this.form.inventory,
                    this.form.money,
                    this.form.state).then(resp => {
                    if (resp.code == 0) {
                        this.$message.success("新增成功！");
                        this.form.product = "";
                        this.form.manufacturer = "";
                        this.form.inventory = "";
                        this.form.money = "";
                        this.form.state = "";
                        this.productQueryAll();
                        getMarketView().then(resp => {
                            this.chart_1(resp);
                            this.chart_2(resp);
                        })
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.error("新增失败！");
                    }

                })
            },
            handleEdit(index, row) {
                this.dialogEditVisible = true;
                getProductById(row.id).then(resp => {
                    this.updateDate.id = resp.data.id;
                    this.updateDate.product = resp.data.product;
                    this.updateDate.manufacturer = resp.data.manufacturer;
                    this.updateDate.inventory = resp.data.inventory;
                    this.updateDate.money = resp.data.money;
                    this.updateDate.state = resp.data.state;
                    console.log(this.updateDate)
                })
            },
            handleDelete(index, row) {
                this.$confirm('此操作将删除该产品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteProduct(row.id).then(resp => {
                        if (resp.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.productQueryAll();
                            getMarketView().then(resp => {
                                this.chart_1(resp);
                                this.chart_2(resp);
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.productQueryAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.productQueryAll();
            },
            chart_1(resp) {
                let myChart = echarts.init(this.$refs.product_chart_1);
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '库存过剩',
                        subtext: "总库存：" + resp.data.counts + "件",
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存过剩'],
                        left: "right"
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '库存过剩',
                        type: 'bar',
                        color: "green",
                        data: []
                    }]
                };
                //库存过多
                resp.data.moreK.forEach(value => {
                    // console.log(value)
                    option.xAxis.data.push(value.product)//inventory
                    option.series[0].data.push(value.inventory)
                })
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            chart_2(resp) {
                let myChart = echarts.init(this.$refs.product_chart_2);
                // 指定图表的配置项和数据

                let option = {
                    title: {
                        text: '库存紧缺',
                        subtext: "请及时采购！"
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存紧缺'],
                        left: "right"
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '库存紧缺',
                        type: 'bar',
                        color: "red",
                        data: []
                    }]
                };
                resp.data.smallF.forEach(value => {
                    console.log(value.inventory)
                    option.xAxis.data.push(value.product)
                    option.series[0].data.push(value.inventory)

                })
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            chart_3() {
                let myChart = echarts.init(this.$refs.product_chart_3);
                // 指定图表的配置项和数据
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    }
</script>

<style scoped>

</style>